
import {ElementUtils} from '../utils/ElementUtils.js';

class ViewManager {

  constructor(spaceId, i18n) {
    this.spaceId = spaceId;
    this.i18n = i18n;
    this.spinner = new kintoneUIComponent.Spinner();
  }
  settings_area;
  result_list_area;
  querys_area;
  save_status_button_Id = 'save_status_button';
  initTabView(settingAreaId, resultListAreaId, querysAreaId) {
    document.getElementsByTagName('BODY')[0].appendChild(this.spinner.render());
    this.settings_area = ElementUtils.generateSettingAreaView(settingAreaId);
    this.result_list_area = ElementUtils.generateResultListAreaView(resultListAreaId);
    this.querys_area = ElementUtils.generateQuerysAreaView(querysAreaId);
    ElementUtils.addTextFieldTitle(this.i18n.query_area_title, this.querys_area);

    // init & add graph area
    const graph_area = ElementUtils.generateGraphElementView();
    const graph_container = ElementUtils.generateGraphContainerView();
    graph_area.appendChild(graph_container);
    // add save status button
    const save_status_button = ElementUtils.generateSaveStatusButton(this.i18n.save_status, this.save_status_button_Id);
    graph_area.appendChild(save_status_button);
    graph_area.appendChild(graph_container);

    // initSettingArea
    const setting_vertical_container = ElementUtils.generateContactElementsContainerView();
    setting_vertical_container.appendChild(this.settings_area);
    setting_vertical_container.id = 'tab_diagramContainer';
    setting_vertical_container.appendChild(this.querys_area);

    // add tab area
    const tabView = ElementUtils.generateTabView([setting_vertical_container.id, graph_area.id]);
    tabView.appendChild(setting_vertical_container);
    tabView.appendChild(graph_area);
    kintone.app.record.getSpaceElement(this.spaceId).appendChild(tabView);
  }
  setOnclickSaveStatusEvent(saveStatus) {
    ElementUtils.getElementById(this.save_status_button_Id).addEventListener('click', saveStatus);
  }
  showPointsByElementIds(elementIds) {
    elementIds.forEach(elementId =>{
      jsPlumb.show(document.getElementById(elementId), true);
    });
  }
  hidePointsByElementIds(elementIds) {
    elementIds.forEach(elementId =>{
      jsPlumb.hide(document.getElementById(elementId), true);
    });
  }
  showLoading() {
    this.spinner.show();
  }
  stopLoading() {
    this.spinner.hide();
  }
}

export default ViewManager;